<template>
  <div>
    <h1>VUE Router</h1>
    <router-link to="/" tag="div">返回首页</router-link>
    <p>页面传值：适用于页面之间的参数传递</p>
    <p>？是间隔符，？后面的是query</p>
    <p>？是间隔符，？前面的是params</p>
    <p>？后面的参数：{{$route.query.name}}</p>
    <p>？后面的参数：{{$route.query.age}}</p>
    <p>？后面的参数：{{$route.query.no}}</p>
    <hr>
    <p>？前面的参数：{{$route.params.username}}</p>
    <p>动态路由——经典场景：前一个页面是列表页，当前页面是详情页。适用于页面大量重复，结构相似、数据不同</p>
    <p>动态路由的特点：修改url时，如果仍然符合当前的路由规则，就意味着还要使用这个组件，就不会先删除这个
      组件，再创建这个组件，而是直接复用。所以，钩子函数不会再次执行</p>
    <p>为了响应路由的变化，有两个方案：1.watch 2.路由的钩子函数</p>
    <button @click="navTodo">看看代码</button> 
    <!-- <button @click="navToClass2">看看二班代码</button> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  // 方案1.watch
  // watch: {
  //  '$route' (to, from) {
  //    console.log(`我正在请求${this.$route.params.username}对应的数据...`)
  //  }
  // },
  // 方案2.路由的钩子函数
  beforeRouteUpdate(to, from, next) {
    console.log(`我正在请求${this.$route.params.username}对应的数据...`)
    next()
  },
  created() {
    console.log(`我正在请求${this.$route.params.username}对应的数据...`)
  },
  methods: {
    navTodo() {
      this.$router.push(`../todo`)
    }
  }
  // methods: {
  //  navToClass2() {
  //  let param1= 'class1';
  //  let param2= 777;
  //    this.$router.push(`../class2-router/${param1}/about/${param2}`)
  //  }
  // }
}
</script>

<style scoped>

</style>